<template>
    <div class="address-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                地址管理
            </template>
        </nav-bar>
        <div v-show="list.length == 0" style="margin-top: 200px; text-align: center;">
            还没有地址信息，去添加吧
        </div>
        <div class="address-item">
            <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
            />
        </div>
    </div>
</template>
<style>
.address-box{
    height: 300px;

}
.address-item{
    margin-top: 45px;
}
.van-button{
    background: var(--color-tint);
    border-color: var(--color-tint);
}
.van-address-list__bottom{
    bottom: 100px;
}
</style>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import {reactive,toRefs,onMounted} from 'vue'
import { getAddressList } from '@/network/address';
import { useRouter } from 'vue-router';
export default({
    components:{
        NavBar
    },
    setup(){
        const router = useRouter()
        const state = reactive({
            chosenAddressId:'1',
            list:[]
        })
        onMounted(()=>{
            getAddressList().then(res=>{
                console.log(res);
                if(res.data.length == 0){
                    state.list = []
                    return 
                }
                state.list = res.data.map(item=>{
                    console.log(!!item.is_default);
                    return {
                        id:item.id,
                        name:item.name,
                        tel:item.phone,
                        address:`${item.province} ${item.city} ${item.county} ${item.address}`,
                        isDefault:!!item.is_default
                    }
                })
            })
        })
        const onAdd = () =>{
            router.push({path:'/addressedit',query:{type:'add'}})
        }
        const onEdit = (item) =>{
            router.push({path:'/addressedit',query:{type:'edit',addressId:item.id}})
        }
        return{
            ...toRefs(state),
            onAdd,
            onEdit
        }
    }
})
</script>
<!-- chosen:选择 tag:标签 province:省 city:市-->